<template>
  <div>
    <div v-if="dialogVisible" class="custom-dialog-overlay">
      <div class="custom-dialog">
        <h3>是否确认登录衣合客栈后台管理系统</h3>
        <div class="dialog-footer">
          <button @click="handleCancel" class="cancel-btn">取消</button>
          <button @click="confirmLogin" class="confirm-btn">确认</button>
        </div>
      </div>
    </div>
    <!-- 登录成功的提示 -->
    <div v-if="loginSuccess" class="success-message">
      <p>登录成功！</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { confirmQrLogin } from "@/api/modules/qrLogin";

// 路由信息
const route = useRoute();
const loginKey = route.query.loginKey as string;

// 弹窗的显示状态
const dialogVisible = ref<boolean>(false);

// 登录成功的状态
const loginSuccess = ref<boolean>(false);

// 打开确认登录弹窗
const openDialog = () => {
  dialogVisible.value = true;
};

// 取消登录
const handleCancel = () => {
  dialogVisible.value = false;
};

// 确认登录
const confirmLogin = async () => {
  if (!loginKey) {
    alert("loginKey 缺失！");
    return;
  }
  // 模拟手机用户ID，实际可以替换为真实的 openid 或手机号
  const userId = "user123";
  // 确认扫码并登录
  const res = await confirmQrLogin(loginKey, userId);
  dialogVisible.value = false;
  if (res.success) {
    // 显示登录成功提示
    loginSuccess.value = true;

    // // 登录成功后，引导用户进入公众号主页
    // setTimeout(() => {
    //   window.location.href = "https://mp.weixin.qq.com/s/OcmALj6sKZ62FPVIVGB5Tg"; // 替换为你的公众号链接
    // }, 1000); // 1秒后跳转，给用户一个成功的反馈
  }
};

onMounted(() => {
  openDialog();
});
</script>

<style lang="scss">
.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6); /* 深色的背景，提高对比度 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-dialog {
  background: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  width: 450px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 给弹窗加上阴影 */
}

.custom-dialog h3 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
}

.dialog-footer button {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ccc;
  width: 120px;
}

.cancel-btn:hover {
  background-color: #e6e6e6;
  transform: translateY(-2px); /* 按钮悬浮效果 */
}

.confirm-btn {
  background-color: #409eff;
  color: white;
  border: none;
  width: 120px;
}

.confirm-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-2px); /* 按钮悬浮效果 */
}

.success-message {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: green;
  font-weight: bold;
}
</style>
